<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>XHR 调试 - Ver1.0.0-beta.220303</title>
    <style>
        body {
            font-size: 14px;
            color:#333;
        }

        a {text-decoration: none; color:#333;}
        strong {
            display: block;
            margin-bottom: 2px;
        }

        div {
            margin-top: 10px
        }

        input {
            margin-bottom: 5px;
        }
    </style>
</head>

<body>
    <strong style="font-size: 1.1rem;">原生 XHR 调试</strong>
    <div>JSON在线解析：
        <a href="http://www.json.team/" target="_blank">http://www.json.team/</a> |
        <a href="https://www.json.cn/" target="_blank">https://www.json.cn/</a> |
        <a href="https://c.runoob.com/front-end/53/" target="_blank">https://c.runoob.com/front-end/53/</a>
    </div>
    <textarea style="width:100%;height:300px;margin:10px 0;"></textarea>

    <div>
        <strong>Get api/photos = index</strong>
        <form action="http://127.0.0.1:8000/api/admin/photos" method="GET">
            <input type="search" name="page_size" value="2" placeholder="page_size"><br />
            <button type="submit">获取列表 Get api/photos</button>
        </form>
    </div>
    <div>
        <strong>GET api/photos/{id} = show</strong>
        <form action="http://127.0.0.1:8000/api/admin/photos/__id__" method="GET">
            <input type="search" name="id" value="1" placeholder="id"><br />
            <button type="submit">获取列表 GET api/photos/{id}</button>
        </form>
    </div>
    <div>
        <strong>POST api/photos = store</strong>
        <form action="http://127.0.0.1:8000/api/admin/photos" method="POST">
            <input type="search" name="user_name" value="aaa" placeholder="user_name"><br />
            <input type="search" name="password" value="bbb" placeholder="password"><br />
            <button type="submit">提交</button>
        </form>
    </div>

    <div>
        <strong>PUT api/photos/{id} = update</strong>
        <form action="http://127.0.0.1:8000/api/admin/photos/__id__" method="POST">
            <input type="search" name="id" value="1" placeholder="id"><br />
            <input type="search" name="user_name" value="aaa1" placeholder="user_name"><br />
            <input type="search" name="password" value="bbb2" placeholder="password"><br />
            <input type="hidden" name="_method" value="PUT">
            <button type="submit">提交</button>
        </form>
    </div>

    <div>
        <strong>DELETE api/photos/{id} = delete</strong>
        <form action="http://127.0.0.1:8000/api/admin/photos/__id__" method="GET">
            <input type="search" name="id" value="1" placeholder=""><br />
            <input type="hidden" name="_method" value="DELETE">
            <button type="submit">提交</button>
        </form>
    </div>
    <script>

        document.querySelectorAll('button').forEach(elBtn => {
            elBtn.addEventListener('click', async function (evt) {
                evt.preventDefault();
                let elForm = evt.target.parentNode, data = {}, query = new URLSearchParams();
                new FormData(elForm).forEach((v, k) => {
                    if (k == '_method' || k == 'token') {
                        return;
                    }
                    data[k] = v;
                    query.append(k, v);
                    console.log('input=', k, v);
                });
                let method = elForm['_method'] ? elForm['_method'].value.toLowerCase() : elForm.method;
                let url = elForm.action;
                if (url.indexOf('__id__') > 0) {
                    url = url.replace('__id__', elForm['id'].value);
                }
                let option = {
                    method: method,
                    mode: 'cors',
                    headers: {
                        'Content-Type': 'application/json',
                        'Authorization': 'eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpc3MiOiJodHRwOi8vZXhhbXBsZS5vcmciLCJhdWQiOiJodHRwOi8vZXhhbXBsZS5vcmciLCJpYXQiOjE2NDQ4MDgyOTEsIm5iZiI6MTY0NDg5NDY5MSwidmFsdWUiOnsiaWQiOiIxMDAwMSJ9fQ.8pHgpnKSVFEpBI4kgqyX1QqsS0gFzKZr_vP8macdYXs',
                    },
                    // body:new FormData(elForm),
                };
                if (method == 'get' || method == 'delete') {
                    if (query.keys().length > 0) {
                        url += (url.contains('?') ? '&' : '?') + query.toString();
                    }
                } else {
                    option.body = JSON.stringify(data)
                }
                console.log('url=', method, url);
                console.log('option=', option);
                try {
                    // https://developer.mozilla.org/zh-CN/docs/Web/API/Fetch_API/Using_Fetch
                    const result = await (await fetch(url, option)).json();
                    console.log('result=', result);
                    document.querySelector('textarea').value = JSON.stringify(result);
                } catch (error) {
                    console.log('error=', error);
                    document.querySelector('textarea').value = error.message;
                }
            })
        })
    </script>
</body>

</html>